<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Resource Type Explorer</title>
    <% if(isDev) { %>
    <script type="module">
      import "@vscode-elements/webview-playground/dist/index.js";

      const template = {
        $schema: "https://schema.management.azure.com/schemas/2019-04-01/deploymentTemplate.json#",
        contentVersion: "1.0.0.0",
        parameters: {
          storagePrefix: {
            type: "string",
            minLength: 3,
            maxLength: 11,
          },
          storageSKU: {
            type: "string",
            defaultValue: "Standard_LRS",
            allowedValues: [
              "Standard_LRS",
              "Standard_GRS",
              "Standard_RAGRS",
              "Standard_ZRS",
              "Premium_LRS",
              "Premium_ZRS",
              "Standard_GZRS",
              "Standard_RAGZRS",
            ],
          },
          location: {
            type: "string",
            defaultValue: "[resourceGroup().location]",
          },
          appServicePlanName: {
            type: "string",
            defaultValue: "exampleplan",
          },
        },
        variables: {
          uniqueStorageName: "[concat(parameters('storagePrefix'), uniqueString(resourceGroup().id))]",
        },
        resources: [
          {
            type: "Microsoft.Storage/storageAccounts",
            apiVersion: "2021-09-01",
            name: "[variables('uniqueStorageName')]",
            location: "[parameters('location')]",
            sku: {
              name: "[parameters('storageSKU')]",
            },
            kind: "StorageV2",
            properties: {
              supportsHttpsTrafficOnly: true,
            },
          },
          {
            type: "Microsoft.Web/serverfarms",
            apiVersion: "2021-03-01",
            name: "[parameters('appServicePlanName')]",
            location: "[parameters('location')]",
            sku: {
              name: "B1",
              tier: "Basic",
              size: "B1",
              family: "B",
              capacity: 1,
            },
            kind: "linux",
            properties: {
              perSiteScaling: false,
              reserved: true,
              targetWorkerCount: 0,
              targetWorkerSizeId: 0,
            },
          },
        ],
        outputs: {
          storageEndpoint: {
            type: "object",
            value: "[reference(variables('uniqueStorageName')).primaryEndpoints]",
          },
        },
      };

      const acquireVsCodeApi = () => ({
        postMessage: () => {
          window.postMessage({
            kind: "DEPLOYMENT_DATA",
            deploymentPath: "/foo/bar/main.bicep",
            localDeployEnabled: false,
            templateJson: JSON.stringify(template, null, 2),
          });
        },
        getState: () => {},
        setState: () => {},
      });

      window.acquireVsCodeApi = acquireVsCodeApi;
    </script>
    <% } %>
  </head>
  <body>
    <vscode-dev-toolbar></vscode-dev-toolbar>
    <div id="root"></div>
    <script type="module" src="/src/index.tsx"></script>
  </body>
</html>
